<template>
  <div class="aboutMe">
    <div class="content">
      <div class="left">
				<h1>关于本人</h1>
				<p class="fade">2008 年接触网站建设</p>
				<p class="fade">2012 年专注前端学习</p>
				<p class="fade">断续写过两年多独立博客（旧博 <a href="http://www.qianxingzhem.com" target="_blank">潜行者m</a>)</p>
				<p class="fade"><a href="http://www.haohaoxuexitiantianxiangshang.com" target="_blank">好好学习天天向上</a> 开发者</p>
				<p class="fade"><a href="http://deepdevelop.com" target="_blank">Deepdevelop</a> 兼职前端工程师</p>
				<p class="fade">目前在申请前端实习，为 10 月份校招做准备。</p>
			</div>
      <div class="right">
        <img src="../assets/images/me.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    const ps = document.querySelectorAll('.fade')
    for (var i = 0, l = ps.length; i < l; i++) {
      (function (i) {
        setTimeout(function () {
          ps[i].classList.add('aa')
        }, 1000 * (i + 1))
      })(i)
    }
  }
}
</script>

<style lang="scss" scoped>
  .aboutMe {
    width: 100%;
    height: 100%;
    background: #d1d2ff;
    .content{
      width: 100%;
      display: flex;
      justify-content: space-around;
      padding-top: 150px;
      box-sizing: border-box;
      .left {
        padding-left: 200px;
        text-align: left;
        h1 {
          font-size: 30px;
          margin-bottom: 30px;
        }
        p {
          font-size: 20px;
          line-height: 40px;
          opacity: 0;
          height: 0;
          transition: all 1s;
          &.aa {
            opacity: 1;
            height: 40px;
          }
        }
      }
      .right {
        padding-right: 150px;
        img {
          height: 500px;
        }
      }
    }
  }
</style>
